<template>
  <div class="header-box">
    <el-row type="flex" justify="space-between">
      <el-col :span="16" class="d-flex align-center">
        <button class="btn-tool" title="折叠" @click="collapse" >
            <i v-if="!isCollapse" class="el-icon-s-fold collapse-icon"></i>
            <i v-else class="el-icon-s-unfold collapse-icon"></i>
        </button>
        <span class="headTitle">Megad商家端后台系统</span>
      </el-col>
      <el-col :span="8" align="right" class="d-flex">

        <div class="header-user-con">
          <!-- 段位 -->
          <!-- <div class="levelBox d-flex align-center" style="margin-right:15px">
          	<el-image :src="user.levelImg | toImgFull"  class="levelImg"></el-image>
            <span class="levelText" style="margin-left: 8px;">{{user.levelName}}</span>
            <span class="levelText" style="margin-left: 8px;color:red;font-weight: bold;" v-if="user.storeType=='2'">(星级代理商)</span>
          </div> -->

          <!-- 消息中心 -->
          <!-- <div class="btn-bell" v-show="message==0">
            <el-popover
                placement="bottom"
                title=""
                width="200"
                trigger="click"
                content="暂无数据">
                 <i class="el-icon-message-solid informIcon" slot="reference"></i>
              </el-popover>
          </div>
          <div class="btn-bell"  v-show="message!=0">
            <el-popover
              placement="bottom"
              width="400"
              trigger="click"
              v-model='showTaskPopover'
              @show="getTaskMsgFn">
                <div style="font-size: 15px;font-weight: bold;padding-left:5px;padding-bottom: 2px;">任务提醒</div>
                <div class="taskTable">
                  <div class='taskItem d-flex' v-for="item in taskMsgList" :title="item.content" @click="handleTaskDetail(item)">
                    <span class="taskTitle ellipsis-item" style="flex:1">{{item.content}}</span>
                    <span class="taskTime" style="width: 50px;text-align: center;">{{item.time}}</span>
                  </div>
                  <div style="text-align: center;cursor: pointer;" @click="handleGoTaskPage" v-if="taskMsgList.length=='5'">查看更多...</div>
                  <div style="text-align: center;"  v-if="taskMsgList.length=='0'">暂无数据</div>
                </div>
                <el-badge :value="message" class="item" slot="reference">
                  <i class="el-icon-message-solid informIcon"></i>
                </el-badge>
            </el-popover>
          </div> -->

          <!-- 退出 -->
          <div class="levelBox d-flex align-center" style="margin-right:15px" @click="logoutFn">
          	 <el-image :src="logout"  class="logoutImg"></el-image>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { logout, remindList, getNoticeCount } from '@/api/getData';
import common from '@/api/api';
export default {
  inject: ['reload'],
  data () {
    return {
      isCollapse: false,
      dialogVisible: false,
      showTaskPopover:false,
      logout: require('@/assets/logout.png'),
      breadcrumbVal:[],//面包屑
      message:0,
      scrollLeft: 5,
      menuList:[],
      user:{/*用户详情*/
        storeImg:'',
        storeName:'',
        levelName:'',
        levelImg:'',
        storeType: 1,
      },
      taskMsgList: []//任务提醒列表
    }
  },
  created() {
    let userDetail = JSON.parse(this.$store.state.userDetails);
    console.log(userDetail)
    this.user.storeImg  = userDetail.storeCache?userDetail.storeCache.logo:"";
    this.user.storeName  = userDetail.storeCache?userDetail.storeCache.name:'';
    this.user.levelName  = userDetail.catalogLevel.name;
    this.user.levelImg  = userDetail.catalogLevel.image;
    this.user.storeType  = userDetail.storeCache.storeType;
  },
  mounted(){
    //this.getNoticeCountFn();
    /*监听更新未读消息个数*/
    this.$EventBus.$on('getNoticeCountBus', ()=>{
        this.getNoticeCountFn();
    })
  },
  methods: {
    /** 去单个任务详情地址 **/
    handleTaskDetail(row){
      this.showTaskPopover = false;
      this.$router.push({path:'/order/orderDetail',query:{id:row.relationId}});
    },
    /** 获取消息个数 **/
    async getNoticeCountFn(){
      try {
        const result = await getNoticeCount();
        this.message = result.data;
      } catch (err) {
        console.log(err)
      }
    },
    /** 去任务提醒页面 **/
    handleGoTaskPage(){
      this.showTaskPopover = false;
      this.$router.push({path:'/system/task?readStatus=1'})
    },
    /** 点击右上角小铃铛获取任务列表 **/
    async getTaskMsgFn(){
      try {
        let data = {
          status:1,
          pageNum:1,
          pageSize:5,
        }
         const result = await remindList(data);
         if (result.code == 200) {
           this.taskMsgList = result.rows;
           let data = result.rows;
           data.map(item=>{
             if(item.insertDate){
               item.time = (this.parseTime(item.insertDate)).substr(5,5)
             }else{
                item.time = ''
             }
           })
         } else {
           this.$message.error(result.msg);
         }
      } catch (err) {
        console.log(err)
      }
    },
    /**获取历史页面名称**/
    getHistoryPageNameFn(){
      let that = this;
      that.breadcrumbVal = [];
      const userRouteList = this.menuList;
      let thisRoutePath = this.$route.matched.length?this.$route.matched[1].path:'';
      for(let i=0;i<userRouteList.length;i++){
      	if(userRouteList[i].children){
      		for(let a = 0;a<userRouteList[i].children.length;a++){
      			if(userRouteList[i].children[a].index == thisRoutePath){
              setTimeout(()=>{that.breadcrumbVal = [{title:userRouteList[i].meta.title},{title:userRouteList[i].children[a].meta.title}];},100)
      				 //console.log(that.breadcrumbVal);
      			}
      		}
      	}
      }

    },
    collapse () {
      this.$store.commit('switchCollapse');
      this.isCollapse = !this.isCollapse;
    },
    refresh () {
      this.reload()
    },
    logoutFn(){
      logout().then((result) => {
        if (result.code == 200) {
          this.$message.success(result.msg);
        } else {
          this.$message.error(result.msg);
        }
      });
      this.$router.replace({ path: '/login' })
    },
    handleCommand (command) {
      switch (command) {
        case 'logout':
          this.logoutFn();
          break
        case 'profile':
          this.$router.replace({ path: '/user/profile' })
      }
    },


  },
  computed: {
    username () {
      let { username } = JSON.parse(sessionStorage.getItem('user'))
      return username.toUpperCase()
    },
    tabs() {
      return this.$store.state.tabs
    }
  },
  watch:{
    	"$route":"getHistoryPageNameFn"
  }
}
</script>

<style lang="scss" scoped>
  .taskItem{
    cursor: pointer;
    padding:4px 0;
  }
	.logoutImg{
		width:30px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
  .levelBox .levelImg{
    width: 77px;
    height: 47px;
  }
  .headTitle{
    color:#333;
    font-size: 18px;
    font-weight: bold;
    margin-left:8px;
  }
  .header-user-con /deep/ .el-badge__content.is-fixed {
      position: absolute;
      top: 19px;
      right: 29px;
      -webkit-transform: translateY(-50%) translateX(100%);
      transform: translateY(-50%) translateX(100%);
  }
  .welcomeBox{
    font-size: 14px;
    color:#333;
  }
  .informIcon{
    font-size:28px;
    color:#61997A;
    margin:0 18px;
    transform: translateY(6px);
  }
  .header-user-con{
    display: flex;
    height: 60px;
    align-items: center;
    margin-left:auto;
  }
  .user-avator img{
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 4px;
  }
  .btn-bell, .btn-fullscreen{
      position: relative;
      text-align: center;
      border-radius: 15px;
      cursor: pointer;
  }
  .btn-tool {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    outline: none;
    text-align: left;
    padding:0px;
    .collapse-icon{
      font-size: 24px;
      color:#FC5173;
    }
  }
  .user-name {
    // margin-left: 20px;
  }
  .header-box /deep/ .el-breadcrumb__inner{
    color:#97a8be!important;
  }
  .header-box /deep/ .el-breadcrumb__inner.is-link{
    color:#333!important;
  }
</style>
